<template>
    <div class="blog-detail-container">
        <h1>{{ data.title }}</h1>
        <span> 发布日期：{{ data.createDate | format_time }}</span>
        <span>浏览：{{ data.scanNumber }}</span>
        <a href="#comment-list">评论：{{ data.commentNumber }}</a>
        <router-link
            :to="{
                name: 'CategoryBlog',
                params: { cate_id: data.category.id }
            }"
        >
            【{{ data.category.name }}】
        </router-link>
        <div class="markdown-body" v-html="data.htmlContent"></div>
    </div>
</template>

<script>
// markdown 中的代码样式
import "highlight.js/styles/gradient-dark.css"

export default {
    props: {
        data: {
            type: Object
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
@import "~@/styles/markdown.css";

.blog-detail-container {
    > span,
    > a {
        color: @secondary;
        margin-right: 15px;
        font-size: 12px;
    }
    .markdown-body {
        margin: 20px 0;
    }
}
</style>
